<template>
  <ex-dialog
    width="500px"
    class="ex-diolog"
    title="新建子账号"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<!-- <el-form-item label="子账号编号" prop="pass">
				<div class="textData">000000000000</div>
			</el-form-item> -->
			<el-form-item label="子账号名称" prop="nickName">
				<el-input type="text" v-model="ruleForm.nickName" autocomplete="off" placeholder="请输入子账号名称"></el-input>
			</el-form-item>
			<el-form-item label="登录账号" prop="userName" v-if="path == 'add'">
				<el-input type="text" v-model="ruleForm.userName" autocomplete="off" placeholder="请输入手机号码"></el-input>
        <span style="color: #1890ff;font-size: 14px">默认初始登录密码为123mlm456*</span>
			</el-form-item>
			<el-form-item label="权限" prop="roleId">
				<el-select v-model="ruleForm.roleId" placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  getRole,
  addRole,
  selectRole,
  getUserDetail,
  editUser,
} from '@/api/setting'
import { string } from 'jszip/lib/support';

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    path: String
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'));
      } else {
        // var reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/; 
        // if (reg.test(value) === false) {
        //   callback(new Error('请输入正确的手机号码'));
        // }
        if(value.length != 11){
          callback(new Error('请输入正确的手机号码'));
        }
        callback();
      }
    };
    return {
      roleList: [],
			options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
        { label: '选项4', value: '4' }
      ],
			ruleForm: {
				userName: '',
        nickName: '',
        roleId: '',
			},
			rules: {
          userName: [
            { required: true,validator:validatePhone ,trigger: 'blur' }
          ],
          nickName: [
            { required: true,message: '请输入子账号名称',trigger: 'blur' }
          ],
          roleId: [
            { required: true,message: '请选择角色权限',trigger: 'change' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    this.selectRole()
    if(this.path == 'edit'){
      this.getDetail()
    }
  },
  methods: {
    //获取详情
    getDetail(){
      var id = this.id
      getUserDetail(id).then(res => {
        console.log('res',res)
        const data = res.result
        this.ruleForm.nickName = data.nickName
        this.ruleForm.roleId = data.roleId
      }).catch(()=>{

      })
    },
    selectRole(){
      selectRole().then(res => {
        this.roleList = res.result
      }).finally(() => {
        this.loading = false
      })
    },
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          if(this.path == 'add'){
            var data = {
              ...this.ruleForm
            }
            addRole(data).then(res => {
              this.handleSuccess("创建成功")
            }).finally(() => {
              this.loading = false
            })
          }else if(this.path == 'edit'){
            var data = {
              id: this.id,
              nickName: this.ruleForm.nickName,
              roleId: this.ruleForm.roleId
            }
            editUser(data).then(res => {
              this.handleSuccess("编辑成功")
            }).finally(() => {
              this.loading = false
            })
          }
         
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.el-select{
  width: 100%;
}

</style>
